<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('单车详情页面')" />
</head>
<body>
    <div class="main-content">
        <div class="ibox float-e-margins">
            <div class="ibox-title  back-change">
                <h5>单车详细信息</h5>
            </div>
            <div class="ibox-content">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-content ">
                                <div class="carousel slide" id="carousel2">
                                    <ol class="carousel-indicators" id="imgSwitch">
                                    </ol>
                                    <div class="carousel-inner" id="imgGrid">
                                    </div>
                                    <a data-slide="prev" href="carousel.html#carousel2" class="left carousel-control">
                                        <span class="icon-prev"></span>
                                    </a>
                                    <a data-slide="next" href="carousel.html#carousel2" class="right carousel-control">
                                        <span class="icon-next"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h1><strong th:text="${bicycle.name}"></strong></h1>
                        <h2 id="tags"></h2>
                        <p></p>
                        <h2><strong>类型：<span th:if="${bicycle.type == 1}">普通</span><span th:if="${bicycle.type == 2}">电车</span></strong></h2>
                        <h2><strong>价格：¥ <span th:text="${bicycle.price}"></span> /小时</strong></h2>
                        <h2><strong>位置：<span th:text="${bicycle.location}"></span></strong></h2>
                        <h2><strong>简介：<span th:text="${bicycle.introduce}"></span></strong></h2>
                        <h3>最后更新日期：<span th:text="${#dates.format(bicycle.updateDate, 'yyyy-MM-dd')}"></span></h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
      
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i> 租车</button>&nbsp;
            <button type="button" class="btn btn-sm btn-info" onclick="subRepair()"><i class="fa fa-wrench"></i> 报修</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i> 关闭</button>
        </div>
    </div>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
	    var prefix = ctx + "admin/record";
        var bicycleInfo = [[${bicycle}]];
        var images = [[${images}]];

	    $(function() {
            //图片初始化
            let gridStr = '';
            let switchStr = '';
            let k = 0;
            images.map(item => {
                let gridItem = '';
                let switchItem = '<li data-slide-to="'+k+'" data-target="#carousel2"></li>';
                let gridItemHead = '<div class="item">';
                if(k == 0){
                    gridItemHead = '<div class="item active">';
                    switchItem = '<li data-slide-to="'+k+'" data-target="#carousel2" class="active"></li>';
                }
                gridItem = gridItemHead +
                '<img alt="image" class="img-responsive" src="'+item.images+'"></div>';
                k++;
                gridStr += gridItem;
                switchStr += switchItem;
            });
            $('#imgGrid').append(gridStr);
            $('#imgSwitch').append(switchStr);
		});
	    
	    /* 申请租车 */
        function submitHandler(){
            $.modal.confirm("确认要租用车辆吗？", function() {
                var config = {
                    url: prefix + "/add",
                    type: "post",
                    dataType: "json",
                    data: {"bikId": bicycleInfo.bikId},
                    beforeSend: function () {
                        $.modal.loading("正在处理中，请稍候...");
                    },
                    success: function(result) {
                        if (typeof callback == "function") {
                            callback(result);
                        }
                        $.operate.successTabCallback(result);
                    }
                };
                $.ajax(config)
            })
        }

        //打开报修弹框
        function subRepair(){
            var url = ctx + 'admin/bicycle/goAddRepair/'+ bicycleInfo.bikId;
            $.modal.open("填写报修信息", url);
        }
    </script>
</body>
</html>